<template>
    <div class="Scroll" :style="{ height: '100%', maxHeight: props.maxHeight }">
        <slot />
    </div>
</template>

<script lang="ts" setup>
interface Props {
    maxHeight?: string | number
}

const props = defineProps<Props>()

</script>

<style lang="scss" scoped>
.Scroll {
    // flex:1;
    position: relative;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;

    &:hover {

        &::-webkit-scrollbar-thumb {
            display: block;
        }

        &::-moz-scrollbar-thumb {
            display: block;
        }

        &::-o-scrollbar-thumb {
            display: block;
        }
    }

    &::-webkit-scrollbar {
        width: 4px;
        background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
        display: none;
        width: 4px;
        border-radius: 2px;
        background-color: #aaa;
    }

    &::-moz-scrollbar {
        width: 4px;
        background-color: transparent;
    }

    &::-moz-scrollbar-thumb {
        display: none;
        width: 4px;
        border-radius: 2px;
        background-color: #aaa;
    }

    &::-o-scrollbar {
        width: 4px;
        background-color: transparent;
    }

    &::-o-scrollbar-thumb {
        display: none;
        width: 4px;
        border-radius: 2px;
        background-color: #aaa;
    }
}
</style>